// 默认导入
import Tool from "./tool.js";

// 定义Game类
class Game extends Tool {
    // 类的构造函数
    constructor() {
        // 调用父类的超级方法(因为继承,并且子类设置了自己的构造函数)
        super();
        // 获取游戏区域的dom对象
        this.gameDom = this.$(".game");
        // 获取分数的dom对象
        this.scoreInput = this.$("#score-input");
        // 默认分数为0
        this.score = 0;
        // 游戏区域下落速度
        this.speed = 1;
        // 定时器标识符
        this.intervalID = null;
        // 判断当前游戏是否已经结束
        this.isGameOver = false;
        // 调用初始化方法
        this.init();
    }

    // 初始化方法
    init() {
        // 调用游戏下落的方法
        this.moveDown();
        // 给游戏区域绑定事件的方法
        this.bindEvent();
    }

    // 游戏区域动画下落的方法
    moveDown() {
        // 使用定时器修改game游戏区域的top值
        this.intervalID = setInterval(() => {
            // 获取当前top属性值
            let currentTop = parseInt(this.getStyle(this.gameDom, "top"));

            // 判断是否触底
            if (currentTop >= 0) {
                // 创建新的一行的方法
                this.createNewRow();

                // 判断游戏区域的行数是否超过5行
                if (this.gameDom.children.length > 5) {
                    // 删除最后一行的方法
                    this.deleteLastRow();
                }

                // 判断游戏是否结束的方法
                this.gameOver();

                return;
            }

            // 设置游戏区域的top值
            this.gameDom.style.top = currentTop + this.speed + "px";
        }, 20);
    }

    // 创建新的一行的方法
    createNewRow() {
        // 创建新的一行
        let newRow = document.createElement("div");
        // 设置类名
        newRow.className = "row";

        // 获取随机黑块的索引号
        let randomIndex = this.getRandom(1, 4);

        // 创建4个列,添加到行中
        for (let i = 1; i <= 4; i++) {
            let newCol = document.createElement("div");
            // 设置类名
            newCol.className = "col";

            // 设置黑块
            if (randomIndex === i) {
                newCol.classList.add("black");
            }

            // 添加到新行中
            newRow.appendChild(newCol);
        }
        // 新行添加游戏区域中
        this.gameDom.insertBefore(newRow, this.gameDom.firstElementChild);
        // 设置游戏区域的top值为-100px
        this.gameDom.style.top = "-100px";
    }

    // 删除最后一行的方法
    deleteLastRow() {
        // 删除游戏区域最后一行(最后一个孩子)
        this.gameDom.lastElementChild.remove();
    }

    // 给游戏区域绑定事件的方法
    bindEvent() {
        // 事件委托
        this.gameDom.onclick = (e) => {
            // 判断游戏是否结束
            if (!this.isGameOver) {
                // 判断是否点击的为黑块
                if (e.target.classList.contains("black")) {
                    // 如果点击是黑块,黑变白,加分,分数是5的倍数的时候,需要加速

                    // 黑变白
                    e.target.classList.remove("black");
                    // 加分
                    this.scoreInput.value = ++this.score;
                    // 分数是5的倍数的时候,需要加速
                    if (this.score % 5 === 0) {
                        // 速度加1
                        this.speed++;
                    }
                } else {
                    // 如果点击的白块
                    // 游戏结束,清除定时器,不允许再点击
                    window.clearInterval(this.intervalID);
                    // 提示信息
                    alert("游戏结束");
                    // 修改游戏状态
                    this.isGameOver = true;
                }
            } else {
                alert("游戏已经结束,请刷新页面重新开始!");
            }
        }
    }

    // 游戏结束的方法
    gameOver() {
        // 判断最后一行黑块是否存在,如果黑块存在,游戏结束
        if (this.gameDom.lastElementChild.querySelector(".black") !== null) {
            // 提示信息
            alert("游戏结束!~~");
            // 清除定时器
            window.clearInterval(this.intervalID);
            // 修改游戏状态
            this.isGameOver = true;
        }
    }
}

new Game();